<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="书名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="1"
                :total=total
                @current-change="page">
        </el-pagination>
    </div>

</template>

<script>
    export default {
        methods: {
            handleClick(row) {
                console.log(row);
            },
            page(currentPage){
                alert(currentPage)
            }
        },
        created(){
            const that = this
            axios.get('http://localhost:8181/book/findAll/1/1').then(function (resp) {
                that.tableData = resp.data.content
                that.total = resp.data.totalElements
            })
        },
        data() {
            return {
                total: null,
                tableData: [{
                    id: '2016-05-02',
                    name: '王小虎',
                    author: '上海'
                }, {
                    id: '2016-05-02',
                    name: '王小虎',
                    author: '上海'
                }, {
                    id: '2016-05-02',
                    name: '王小虎',
                    author: '上海'
                }, {
                    id: '2016-05-02',
                    name: '王小虎',
                    author: '上海'
                }]
            }
        }
    }
</script>